<!-- @format -->

<template>
	<view class="l-icon" @click="$emit('click')">
		<view class="l-icon" :class="[labelpops, { bold: bold }]">
			<view>
				<i :class="[`l-icon-${type}`, 'iconfont', name]" :style="[iconStyle, activeStyle]"></i>
			</view>
			<view class="l-icon-text" :style="[iconTextStyle]" v-if="label">{{ label }}</view>
		</view>
	</view>
</template>

<script>
	import props from "./props.js";
	export default {
		name: "l-icon",
		mixins: [props],
		data() {
			return {};
		},
		computed: {
			// 图标样式
			iconStyle() {
				const style = {
					fontSize: uni.$lu.addUnit(this.size),
					color: this.color,
					"background-color": this.bg,
				};
				return uni.$lu.addStyle(style);
			},
			// 图标label文本样式
			iconTextStyle() {
				const style = {
					color: this.textcolor,
					fontSize: uni.$lu.addUnit(this.fontSize),
				};
				return uni.$lu.addStyle(style);
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "icon.css";

	[class*="icon"] {
		font-family: "iconfont";
		font-size: inherit;
		/*继承父级*/
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		/*抗锯齿，字体清晰*/
		-moz-osx-font-smoothing: grayscale;
		/*抗锯齿，比较清晰*/
	}

	.l-icon {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		&-text {
			font-size: 14px;
			padding: 5px;
		}

		@include them;
	}

	.left {
		flex-direction: row-reverse;
	}

	.bottom {
		flex-direction: column;
	}

	.top {
		flex-direction: column-reverse;
	}

	.bold {
		font-weight: bolder;
	}
</style>
